<template>
  <div>
    <tab-bar class="tab-bar">
      <tab-bar-item>
        <div slot="item-text" class="left-item" >
          <div>
            <img src="../../../assets/img/detail/2.jpg" alt="" />
            <div>客服</div>
          </div>
          <div>
            <img src="../../../assets/img/detail/3.jpg" alt="" />
            <div>店铺</div>
          </div>
          <div>
            <img src="../../../assets/img/detail/1.jpg" alt="" />
            <div>收藏</div>
          </div>
        </div>
      </tab-bar-item>
      <tab-bar-item>
        <div slot="item-text" class="right-item">
          <div @click="addCart">加入购物车</div>
          <div>购买</div>
        </div>
      </tab-bar-item>
    </tab-bar>
    <tjcg class="box" v-show="isShow"/>
  </div>
</template>

<script>
import TabBar from "../../../components/common/tabbar/TabBar.vue";
import TabBarItem from "../../../components/common/tabbar/TabBarItem.vue";
import Tjcg from './Tjcg.vue';
export default {
  components: { TabBarItem, TabBar, Tjcg },
  name: "Detailbbar",

  data() {
    return {
      isShow:false
    };
  },

  mounted() {},

  methods: {
    addCart(){
      this.$emit('addCart');
      this.isShow=true
      setTimeout(() => {
        this.isShow=false
      }, 1500);
    }
  },
};
</script>

<style lang="css" scoped>

.left-item ,.right-item{
  /* border: 1px solid black; */
  display: flex;
  background-color: #fff;
}
.left-item div,.right-item div{
  flex: 1;
}
.right-item div{
  text-align: center;
  height: 44px;
  line-height: 44px;
}
.right-item div:nth-child(1){
  background-color: yellow;
}
.right-item div:nth-child(2){
  background-color: rgb(252, 146, 164);
  color: #fff;
}
.box{
  height: 16vh;
  background-color: rgba(0,0,0,0.5);
  width: 26vh;
  position: fixed;
  z-index: 13;
  top: calc(50% - 8vh);
  left: calc(50% - 13vh);
  line-height: 16vh;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
</style>